<#include "../common/_header.htm">
<div class="content-wrapper" style="margin-left: 0px">
        <section class="content">
            <div class="row">
                <div id="inAccount" >
                    <div class="stream_search" >
                        <el-form id="listForm" :inline="true"  :model="form" class="demo-form-inline">
                            <el-form-item class="form_z" label="日期范围">
                                <el-date-picker
                                        v-model="form.beginTime"
                                        name="beginTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item class="el-form-item refsh" label="至">
                                <el-date-picker
                                        v-model="form.endTime"
                                        name="endTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="金额">
                                <el-input v-model="form.minMoney" name="minmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item class="refsh" label="至">
                                <el-input v-model="form.maxMoney" name="maxmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item label="关键字">
                                <el-input v-model="form.rivalName" name="rivalName" placeholder="对方账号/开户名"></el-input>
                            </el-form-item>
                            <div class="zcdbtn-con">
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">分析</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button class="el-button el-button--default reset_button"  @click="clear">重置</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="exportExcel" class="daobtn">导出</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                    <div class="casemanage-switchtip">
                        <div :class="{active:showType==1}" @click="dg()" title="切换为列表显示">
                            <i class="casemanage-switchtip-list"></i><span>列表</span>
                        </div>
                        <div :class="{active:showType==0}" @click="getlist(0)" title="切换为图表显示">
                            <i class="casemanage-switchtip-chart"  id="font_zhexian"></i><span>图表</span>
                        </div>
                        <div title="切换为关系图显示" data-event="d3Show">
                            <i class="casemanage-switchtip-d3"></i><span>关系图</span>
                        </div>
                    </div>
                    <div class="stream_body" id="table-body" >
                        <div v-show="showType==0" style="margin:10px 10px 5px;">
                            <div id="main" style="height:300px;width: 1485px"></div>
                        </div>
                        <div v-show="showType==1">
                            <table id="dg">
                            </table>
                        </div>
                    </div>
                    <div id="hidebg"></div>

                </div>
            </div>
        </section>
    </div>
    <script>
    	var caseId=parent.caseId;
        //console.log($(window).height())
    	//console.log($(".stream_search").outerHeight(true))
        //console.log($(".watnav").outerHeight(true))
		$(document).ready(function(){
			 $(window).resize(function(){
				$('#dg').datagrid('resize',{
                    // height:($(window).height())-150
                    height:($(window).height())-($('.stream_search').outerHeight(true))-50,
                });
			});
		});
        var arr = new Array();
        let inAccount=new Vue({
            el:"#inAccount",
            data:{
                showType:1,
                form: {
                    rivalName: '',
                    beginTime: '',
                    endTime: '',
                    minMoney:"",
                    maxMoney:"",
                },
            },
            methods: {
                onSubmit() {
                    if (this.showType==1){
                        dg()
                    } else{
                        this.getlist(0)
                    }
                },
                clear(){
                    this.form={
                        rivalName: '',
                        beginTime: '',
                        endTime: '',
                        minMoney:"",
                        maxMoney:"",
                    }
                },
                exportExcel(){
                    var minMoney = "";var maxMoney = "";
                    if (this.form.minMoney) minMoney = this.form.minMoney;
                    if (this.form.maxMoney) maxMoney = this.form.maxMoney;
                    //let a = "rivalName="+this.form.rivalName+"&minMoney="+minMoney+"&maxMoney="+maxMoney+"&beginTime="+getMyDate(this.form.beginTime)+"&endTime="+getMyDate(this.form.endTime)+"&cardList="+arr;
                    //window.location.href="${ctx}/bill/stream/export/0?"+a;
                    //return
                    var xhr = new XMLHttpRequest();
                    var url="${ctx}/bill/stream/export/0";
                    xhr.open('POST', url, true);
                    xhr.responseType = "blob";  // 返回类型blob
                    // 定义请求完成的处理函数
                    xhr.onload = function () {
                        // 请求完成
                        if (this.status === 200) {
                            var content = this.response;
                            var aTag = document.createElement('a');
                            var blob = new Blob([content]);
                            var headerName = xhr.getResponseHeader("Content-disposition");
                            var fileName = decodeURIComponent(headerName).substring(20);
                            aTag.download = fileName;
                            aTag.href = URL.createObjectURL(blob);
                            aTag.click();
                            URL.revokeObjectURL(blob);
                        }
                    };
                    // 发送ajax请求
                    var formdata=new FormData();
                    formdata.append("cardList",arr);
                    formdata.append("rivalName",this.form.rivalName);
                    formdata.append("minMoney",minMoney);
                    formdata.append("maxMoney",maxMoney);
                    formdata.append("caseId",caseId);
                    formdata.append("endTime",getMyDate(this.form.endTime));
                    formdata.append("beginTime",getMyDate(this.form.beginTime));
                    xhr.send(formdata);
                },
                getlist(showType){
                	this.showType = showType;
                    request({
                        url: 'bill/stream/inaccountstatistics/1/20',
                        method: 'post',
                        data:{
                            rivalName: this.form.rivalName,
                            minMoney: this.form.minMoney,
                            maxMoney: this.form.maxMoney,
                            beginTime: getMyDate(this.form.beginTime),
                            endTime: getMyDate(this.form.endTime),
                            cardList: arr,
                            caseId:caseId,
                            showType : showType
                        }
                    }).then(result=>{
                       	var xAxis = result.data.data.allRows.map(m => {
                       	    if (m.ACCOUNT_RIVAL) {
                       	        return m.ACCOUNT_RIVAL
                            }else{
                                return m.ACCOUNT_RIVAL_CARD
                            }
                        });
                        var echarts_data1 = result.data.data.allRows.map(m => m.INMONEY);
                        if (showType==0)showINEcharts('流入账号统计',xAxis,echarts_data1);
                    })
                },
            }
        })
        $("#listForm").validate({
            rules: {
                minmoney : {
                    digits:true
                },
                maxmoney : {
                    digits:true
                }
            },
            messages: {
                minmoney:'请输入一个正整数',
                maxmoney:'请输入一个正整数',
            }
        });
        $('div[data-event=d3Show]').on('click', function() {
                var param = {
                    accountRival: $("input[name='rivalName']").val(),
                    minMoney: $("input[name='minmoney']").val(),
                    maxMoney: $("input[name='maxmoney']").val(),
                    beginTime: $("input[name='beginTime']").val(),
                    endTime: $("input[name='endTime']").val(),
                    cardList:arr,
                    caseId:caseId,
                    _checkedAccount:"-1"
                };
                if(parent.parent._checkedAccount.length>=1000){
                    param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
                };
                var d = top.dialog({
                    title : '流入卡号交易关系图',
                    modal : true,
                    url : '${ctx}/bill/stream/d3/inaccountStatisticsD3Init',
                    height : 800,
                    width : 1500,
                    data : param,
                    onshow : function () {
                    }
                });
                d.show();
                return false;
        });
        function tabDialog(ACCOUNT_RIVAL_CARD,ACCOUNT_RIVAL,sign) {
            var param = {
                accountRivalCard:ACCOUNT_RIVAL_CARD,
                accountRival:ACCOUNT_RIVAL,
                cardList:arr,
                caseId:caseId,
                sign:sign=='undefined'?"":sign
            };
            if(parent.parent._checkedAccount.length>=1000){
                param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
            };
            var d = top.dialog({
                title : '流入卡号统计详情',
                modal : true,
                url : '${ctx}/bill/stream/d3/inaccountStatisticsDialogInit',
                height : 750,
                width : 1500,
                data : param,
                onshow : function () {
                },

            });
            d.show();
            return false;
        }
        function _checkedCallback(_checkedAccount) {
            if(_checkedAccount&&_checkedAccount.length>0){
                arr = _checkedAccount.map(m=>{
                    return "'"+m.split("_")[1]+"'";
                })
                arr = arr.join(',');
                dg()
            }else{
                arr=[]
                arr = arr.join(',');
                inAccount.tableData=[]
                inAccount.total=""
                showINEcharts('流入账号统计',null,null,null)
                dg()
            }
        }
        _checkedCallback(parent.parent._checkedAccount)
        /*-----------------------easyui表格-----------------------------*/
        function dg(){
            inAccount.showType=1;
            setTimeout(function(){
            	$('#dg').datagrid({
                    url: '${ctx}/bill/stream/inaccountstatistics_easyui',
                    method: 'post',
                    iconCls: 'icon-save',
                    queryParams:{//每次请求的参数
                        rivalName: inAccount.form.rivalName,
                        minMoney: inAccount.form.minMoney,
                        maxMoney: inAccount.form.maxMoney,
                        beginTime: getMyDate(inAccount.form.beginTime),
                        endTime: getMyDate(inAccount.form.endTime),
                        cardList: arr,
                        caseId:caseId,
                        showType : inAccount.showType
                    },
                    pageSize:30,
                    pageList:[30,50,100,150,200],
                    pageNumber:1,//当前页号,
                    //sortName:"TOTALMONEY",//排序列名称 设置后将向后台传送名为sort的post/get参数
                    //sortOrder:"desc",//排序列升降序 设置后将向后台传送名为order的post/get参数

                    loadMsg:"正在加载，请稍后",//加载数据时的提示信息
                    emptyMsg:"暂无信息",//加载数据为空时的信息
                    height: ($(window).height())-($('.stream_search').outerHeight(true))-50,
                    rownumbers:true,//序号
                    fitColumns: true,//使表格自适应页面宽度
                    pagination: true,//是否分页
                    singleSelect: true,
                    columns:[[ //每一列的具体设置。
                        {field:'ACCOUNT_RIVAL_CARD',title:'对手账号'},
                        {field:'ACCOUNT_RIVAL',title:'开户名'},
                        {field:'ACCOUNT_LOCALE',title:'归属地'},
                        {field:'ACCOUNT_PROVICE',title:'归属省'},
                        {field:'ACCOUNT_BANK',title:'归属银行'},
                        {field:'TOTALMONEY',title:'交易总金额', sortable : true},
                        {field:'TOTALNUMBER',title:'总次数', sortable : true,
                            formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                                let ACCOUNT_RIVAL_CARD = row.ACCOUNT_RIVAL_CARD?row.ACCOUNT_RIVAL_CARD:'';
                                let ACCOUNT_RIVAL = row.ACCOUNT_RIVAL?row.ACCOUNT_RIVAL:'';
                                return '<a href="#" onclick="tabDialog(\''+ACCOUNT_RIVAL_CARD+"\',\'"+ACCOUNT_RIVAL+'\')">'+value+'</a>'
                            }
                        },
                        {field:'PUREINMONEY',title:'净流入金额', sortable : true},
                        {field:'INMONEY',title:'流入金额', sortable : true},
                        {field:'INMONEYPER',title:'流入金额占比', sortable : true},
                        {field:'INNUMBER',title:'流入次数', sortable : true,
                            formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                                let ACCOUNT_RIVAL_CARD = row.ACCOUNT_RIVAL_CARD;
                                let ACCOUNT_RIVAL = row.ACCOUNT_RIVAL?row.ACCOUNT_RIVAL:'';
                                return '<a href="#" onclick="tabDialog(\''+ACCOUNT_RIVAL_CARD+"\',\'"+ACCOUNT_RIVAL+'\',0)">'+value+'</a>'
                            }},
                        {field:'INNUMBERPER',title:'流入次数比', sortable : true,width:500}
                    ]],
                    onHeaderContextMenu: function(e, field){
                        e.preventDefault();
                        if (!cmenu){
                            createColumnMenu();
                        }
                        cmenu.menu('show', {
                            left:e.pageX,
                            top:e.pageY
                        });
                    },
                    onLoadSuccess: function(){
                        parent.sheZhiHeight();
                        // refreshSize();
                    }
                });
            },100);
        }

    </script>
    <script src="${ctx}/bower_components/easyui/common/titleHide.js"></script>
    <style>
        .el-form-item{
            margin-bottom: 0;
        }
        .stream_search {
            margin: -20px 0 0 0;
        }
        .el-input__inner {
            border-color: #D2D6DE;
            font-size: 12px;
            border-color: #e4e4e4;

        }
        .zcdbtn-con {
            display: inline-block;
            margin-left:0px;
        }
        .el-button{
            width: 70px;
            margin-right: 0;
            height: 30px;
            line-height: 0px;
        }
        button.el-button.daobtn.el-button--primary{
            background-color: #23B7E5;
            border-color: #23B7E5;
        }
        #hidebg {
            position:absolute;
            left:0px;
            top:0px;
            background-color:#000;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            display:none;
            z-Index:999;
        }
        .outAccount_d3_head {
            float: left;
            font-size: 20px;
        }

        input.error { border: 1px solid red; }
        label.error {
            background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
        }
        .badge{
            background-color: #f7051f;
        }

        .el-form-item__label{
            color: #6f7689;
            font-weight: 400;
            font-size: 13px;
        }

        .casemanage-switch .casemanage-zhexiantu.active {
            background-color: #4695ed;
        }
        .casemanage-switch .casemanage-zhexiantu {
            background-color: #f2f6f9;
            float: left;
            width: 50px;
            height: 35px;
            display: block;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            line-height: 35px;
            text-align: center;
        }
        #font_zhexian{
            color: #C1C2C3;
            font-size: 18px;
        }
        #font_zhexian.active{
            color: #F4F9FE;
        }
        .el-input__inner:hover{
            border-color:#4695ed;
        }
        .el-input__inner:focus{
            border-color:#4695ed;
        }
        .el-dialog--small{
            width: 95%;
            margin-top: 67px;
        }
        .el-button--primary{
            background-color:#4695ed;
            border-color:#4695ed;
        }
        .el-button--primary:focus, .el-button--primary:hover{
            background: #61a8f5;
            border-color: #61a8f5;
        }
        button.el-button.el-button--default.reset_button {
            background-color: #f4f4f4;
            color: #444;
            border-color: #ddd;
        }
        .button.el-button.el-button--default.reset_button:focus, button.el-button.el-button--default.reset_button:hover{
            border-color: #adadad;
            background-color: #e7e7e7;
        }

        .showD3 {
            display: inline-block;
            background-color: #F2F6F9;
            width: 50px;
            height: 35px;
        }
        button.btn.btn-primary-fullScreen{
            border: transparent;
            height: 24px;
            background: url(../../../imgs/icon-relative.png);
            background-size: 20px;
            background-repeat: no-repeat;
            background-position: center center;
            display: inline-block;
            width: 50px;
            height: 35px;
        }
        button.btn.btn-primary.active{
            background-color: #4595ec;
        }
        .btn-primary:active:focus, .btn-primary:active:hover{
            background-color: transparent;
            border-color: transparent;
        }
        svg {
            width: 100%;
            height: 95%;
        }
        button.close span {
            font-size: 55px;
            font-weight: 350;
        }
        .modal-header .close {
            margin-top: -19px;
        }
        .el-pagination {
            margin-top: 10px;
        }
        .content-wrapper {
            padding: 10px;
        }
    </style>
</body>
</html>
